<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body style="background: url(layui/images/img/examBg.jpg);background-size: 100%">
<h2 class="layui-header" style="text-align: center;height: 40px;">
    智能评分考试系统
</h2>
<hr>

<div class="layui-row">
    <div class="layui-col-md2 layui-col-md-offset1" style="opacity: 80%;margin-top: 10px;text-align: center">
        <div class="layui-row">
            <img th:src="${session.user.img}" style="border-radius: 50%;width: 120px;height: 120px"><br>
            <h5 style="margin-top: 20px">[[${session.user.userName}]]</h5>
        </div>
        <hr>
        <div class="layui-row" style="margin-top: 30px">
            <h4 class="layui-header" style="text-align: center">
                <a th:href="@{/aboutMe}">个人中心</a><br>
                <i>PERSONAL CENTER</i>
            </h4>
        </div>
        <div class="layui-row" style="margin-top: 30px">
            <h4 class="layui-header" style="text-align: center">
                <a th:href="@{/detail}">首页</a><br>
                <i>HOME</i>
            </h4>
        </div>
        <div class="layui-row" style="margin-top: 30px">
            <h4 class="layui-header" style="text-align: center">
                <a th:href="@{/myTest}">我的测验</a><br>
                <i>MY TEST</i>
            </h4>
        </div>
        <div class="layui-row" style="margin-top: 30px">
            <h4 class="layui-header" style="text-align: center">
                <a th:href="@{/loginOut}">退出系统</a><br>
                <i>LOGIN OUT</i>
            </h4>
        </div>
    </div>
    <div class="layui-col-md7 layui-col-md-offset1" style="margin-top: 30px;opacity: 50%">
        <div class="layui-card">
            <h2 class="layui-card-header" style="font-size: 18px;text-align: center">个人信息</h2>
            <hr>
            <div class="layui-card-body" style="margin-left: 30px">
                <div class="layui-row" style="font-size: 20px;float: right">
                    <button type="button" class="layui-btn layui-btn-sm" id="changeMessage">修改个人信息</button>
                </div>
                <div class="layui-row" style="font-size: 15px;margin-bottom: 30px">
                    <i class="layui-icon layui-icon-user" style="margin-right: 5px"></i>
                    用户名：<span>[[${session.user.userName}]]</span>
                </div>
                <div class="layui-row" style="font-size: 15px;margin-bottom: 30px">
                    <i class="layui-icon layui-icon-password" style="margin-right: 5px"></i>
                    密码：<span>[[${session.user.userPassWord}]]</span>
                </div>
                <div class="layui-row" style="font-size: 15px;margin-bottom: 30px">
                    <i class="layui-icon layui-icon-component" style="margin-right: 5px"></i>
                    学校：<span th:text="${session.user.school}==null ? '用户比较懒，还没来得及改':${session.user.school}"></span>
                </div>
                <div class="layui-row" style="font-size: 15px;margin-bottom: 30px">
                    <i class="layui-icon layui-icon-component" style="margin-right: 5px"></i>
                    专业：<span th:text="${session.user.major}==null ? '用户比较懒，还没来得及改':${session.user.major}"></span>
                </div>
                <div class="layui-row" style="font-size: 15px;margin-bottom: 30px">
                    <i class="layui-icon layui-icon-picture-fine" style="margin-right: 5px"></i>
                    头像：<a style="margin-left: 5px" id="changeIcon">点击更换头像</a><br>
                    <div style="margin-left: 5px;font-size: 12px">
                        <span style="color: red">由于时间有限，存储头像将使用图片外链存储,</span>
                        <a href="http://i.nizdm.com/" target="_blank">请点击此处上传图片并把生成链接填入修改框中</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row" id="test" style="display: none;">
        <div class="layui-form" style="margin: 20px">
            <select id="checkPage">
                <option value="请选择修改项" disabled>请选择修改项</option>
                <option value="password">密码</option>
                <option value="school">学校名称</option>
                <option value="major">专业名称</option>
            </select>
            <input type="text" name="title" required  lay-verify="required" placeholder="请输入更新信息" autocomplete="off" class="layui-input" style="margin-top: 10px">
        </div>
</div>
<script src="layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="layui/layui.all.js"></script>
<script type="text/javascript" src="layui/md5.js"></script>
<script>
    $('#changeMessage').click(function () {
        layer.open({
            type: 1,
            title: '修改信息',
            area: ['300px', '320px'],
            content:$("#test"),
            scrollbar: false,
            btn:'更新信息',
            yes:function (index) {
                var name = $('#checkPage').val();
                var toValue = $('input[name=title]').val();
                $.ajax({
                    type:'get',
                    url:'/updateMe',
                    data:{
                        "name":name,
                        "toValue":toValue
                    },success:function () {
                        alert("修改成功,下次登录后信息同步");
                    },fail:function () {
                        alert("不知名失败");
                    }
                });
                window.location.reload(true);

            }
        });

    });
</script>
<script>
    $('#changeIcon').click(function () {
        layer.prompt({
            formType: 0,
            title: '请输入链接值',
        }, function(value, index, elem){
            var name = "img";
            $.ajax({
                type:'get',
                url:'/updateMe',
                data:{
                    "name":name,
                    "toValue":value
                },success:function () {
                    alert("修改成功,下次登录后信息同步");
                },fail:function () {
                    alert("不知名失败");
                }
            });
            layer.close(index);
        });
    });
</script>

</body>
</html>